<template>
	<view class="apply">
		<view class="apply_box public_sty">
			<view class="apply_title"><text>退款药品</text></view>
			<view class="apply_shop_box shops_box">
				<view class="shops_img_box"><image class="shops_img" :src="applyShop.img" mode=""></image></view>
				<view class="">
					<view class="text_letter_sty">
						<text>{{ applyShop.shopname }}</text>
					</view>
					<view class="text_sml shops_num">
						<text>药品规格</text>
						<text>x{{ applyShop.shopNum }}</text>
					</view>
					<view class="">
						<text>￥</text>
						<text>{{ applyShop.pic }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="apply_box  public_sty">
			<view class="apply_title"><text>退款信息</text></view>
			<view class="apply_receive">
				<view class="text_letter_sty"><text>收货状态</text></view>
				<view class="text_sml" @click="reclick(1)">
					<view class="" v-if="receive == ''">
						<text>请选择</text>
						<uni-icons type="arrowright" size="12"></uni-icons>
					</view>
					<view class="text_sml" v-else>
						<text>{{ receive }}</text>
					</view>
				</view>
			</view>
			<view class="apply_receive">
				<view class="text_letter_sty"><text>退款原因</text></view>
				<view class="text_sml" @click="reclick(2)">
					<view class="" v-if="refund == ''">
						<text>请选择</text>
						<uni-icons type="arrowright" size="12"></uni-icons>
					</view>
					<view class="text_sml" v-else>
						<text>{{ refund }}</text>
					</view>
				</view>
			</view>
			<view class="apply_receive" style="margin-bottom: 8rpx;">
				<view class="text_letter_sty"><text>退款金额</text></view>
				<view class="text_error"><text>￥30.8</text></view>
			</view>
			<view class="text_sml"><text>最多￥30.8</text></view>
		</view>
		<view class="apply_box apply_seat  public_sty">
			<view class="apply_title"><text>补充描述和凭证</text></view>
			<view class="apply_field">
				<van-field
					autosize
					:left-icon="img"
					:value="voucher"
					type="textarea"
					maxlength="200"
					placeholder="补充描述,  有助于商家更好的处理售后问题"
					show-word-limit
					@input="fieldClick"
				></van-field>
			</view>
			<view class="eveal_up" @click="evealCam"><view class="up_box"></view></view>
		</view>
		<view class="">
			<button type="primary" class="" @click="subApplic"><text>提交申请</text></button>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup_box">
				<view class="popup_title"><text>收货状态</text></view>
				<view class="check_sta" v-for="(item, idxs) in check" :key="idxs" @click="radioCheck(idxs)">
					<text class="text_letter_sty">{{ item.value }}</text>
					<radio-group name="">
						<label><radio value="" style="transform:scale(0.7)" :checked="idxs == recCheckStatus" /></label>
					</radio-group>
				</view>
				<view class="">
					<button type="primary" style="border-radius: 20rpx;" @click="recdeter"><text>确定</text></button>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			applyShop: {
				img: '/static/uni.png',
				shopname: '澳佳宝Blackmores  深海鱼油软胶囊  无腥味  1000mg Omega-3',
				shopNum: 2,
				pic: 22
			},
			receive: '',
			recID: '',
			refund: '',
			refId: '',
			voucher: '',
			img: '/static/add.png',
			recCheckStatus: 0,
			ids: '',
			check: [],
			recCheck: [
				{
					value: '未收到货'
				},
				{
					value: '已收到货'
				}
			],
			refundlist: [
				{
					value: '计划不变，我不想要了'
				},
				{
					value: '我买错了/填错了'
				},
				{
					value: '药品存在质量问题'
				},
				{
					value: '药品包装破损/污渍'
				},
				{
					value: '药品已过期'
				},
				{
					value: '少件/漏发/错发'
				},
				{
					value: '配送太慢，不要了'
				},
				{
					value: '其他'
				}
			]
		};
	},
	methods: {
		fieldClick(e) {
			this.voucher = e.detail;
		},
		reclick(id) {
			this.ids = id;
			if (id == 1) {
				this.check = this.recCheck;
			} else {
				this.check = this.refundlist;
			}
			this.$refs.popup.open();
		},
		radioCheck(id) {
			this.recCheckStatus = id;
		},
		recdeter() {
			if (this.ids == 1) {
				this.receive = this.recCheck[this.recCheckStatus].value;
				this.recID = this.recCheckStatus;
			} else {
				this.refund = this.refundlist[this.recCheckStatus].value;
				this.refId = this.recCheckStatus;
			}
			this.recCheckStatus = 0;
			this.$refs.popup.close();
		},
		subApplic() {
			uni.showModal({
				cancelColor: '#999999',
				cancelText: '是',
				confirmColor: '#00B359',
				confirmText: '否',
				content: '是否提交退款申请',
				success: res => {
					if (res.confirm) {
						console.log('用户点击否');
					} else if (res.cancel) {
						console.log('用户点击是');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.apply {
	padding: 30rpx;
}
.apply_box {
	padding: 30rpx;
	margin-bottom: 24rpx;
}
.apply_shop_box {
	margin-top: 20rpx;
}
.shops_num {
	margin-top: 8rpx;
}
.apply_receive {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 0rpx;
	/deep/ .uni-icons {
		margin-left: 20rpx;
	}
}
.apply_field {
	position: relative;
	/deep/ .uni-icons {
		position: absolute;
		z-index: 10;
		top: 20%;
		left: 0%;
	}
	/deep/ .vam-cell {
		padding: 0rpx;
	}
}
.eveal_up {
	margin-top: 60rpx;
	.up_box {
		border: 2rpx solid;
		width: 190rpx;
		height: 190rpx;
		border-radius: 20rpx;
	}
}
.apply_seat {
	margin-bottom: 60rpx;
}
.popup_box {
	padding: 0rpx 30rpx;
	padding-top: 40rpx;
	padding-bottom: 40rpx;
}
</style>
